<template>
	
	<div class="cmy-comment">
		
		<h3>发表评论</h3>
		<hr>

		<textarea placeholder="请输入您要BB的内容" maxlength="120" v-model="msg"></textarea>
		<mt-button type="primary" size="large" @click="sendMes">发表评论</mt-button>

		<div class="cmt-list">
			<div class="cmt-item" v-for="(item,i) in commentsMes" :key="item.add_time">
				<div class="cmt-title">
					第{{ i+1 }}楼&nbsp;&nbsp;;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}&nbsp;&nbsp;
				</div>
				<div class="cmt-body">
					{{ item.content }}
				</div>
			</div>
		</div>
		<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>	
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default {
		data () {
			return {
				pages: 1,
				commentsMes:[],
				msg:''
			}
		},
		created () {
			this.getComments()
		},
		methods: {
			getComments () {
				this.$http.get('http://www.liulongbin.top:3005/api/getComments/' + this.id + '?pageindex=' + this.pages).then(result => {
					if (result.body.status === 0) {
						this.commentsMes = this.commentsMes.concat(result.body.message);
						// console.log(this.commentsMes)
					} else {
						Toast('获取信息失败')
					}
				})
			},
			getMore () {
				this.pages ++;
				this.getComments()
			},
			sendMes () {
				if (this.msg.length === 0) {
					return Toast('请输入评论内容')
				}
				this.$http.post('http://www.liulongbin.top:3005/api/postcomment/' + this.$route.params.id, {
					content: this.msg.trim()
				}).then( result => {
					if(result.body.status === 0) {
						var cmt = {
							user_name: '匿名用户',
							add_time: Date.now(),
							content: this.msg
						}
						this.commentsMes.unshift(cmt)
					} else {
						return Toast('评论失败')
					}
				})
			}
		},
		props:['id']
	}
</script>

<style>
	

</style>